$(start);

function start(){
    console.log("start")

    var chart1 = echarts.init(document.getElementById('gyr1'));
    var chart2 = echarts.init(document.getElementById('gyr2'));
    var chart3 = echarts.init(document.getElementById('gyr3'));
    var chart4 = echarts.init(document.getElementById('gyr4'));

    var gyrX1 = [];
    var gyrY1 = [];
    var gyrZ1 = [];
    var xAxis1 = [];
    var startValue1 = 0;
    var endValue1 = 0;

    var gyrX2 = [];
    var gyrY2 = [];
    var gyrZ2 = [];
    var xAxis2 = [];
    var startValue2 = 0;
    var endValue2 = 0;

    var gyrX3 = [];
    var gyrY3 = [];
    var gyrZ3 = [];
    var xAxis3 = [];
    var startValue3 = 0;
    var endValue3 = 0;

    var gyrX4 = [];
    var gyrY4 = [];
    var gyrZ4 = [];
    var xAxis4 = [];
    var startValue4 = 0;
    var endValue4 = 0;

    var option1 = {
        title: {
            text: '角速度（m/s2）',
            x: 'center'
        },
        tooltip: {},
        legend: {
            // borderWidth:1,
            // padding:10,
            // itemGap:20,
            data:['x方向角速度','y方向角速度','z方向角速度'],
            x:'left',
            // y:'top',
            // textStyle:{
            //     color:'rgba(0,0,0,255)'
            // }
        },
        dataZoom:[
            {
                show:true,
                realtime:true,
                startValue:startValue1,
                endValue:endValue1,
            }
        ],
        xAxis: {
            data: xAxis1,
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // boundaryGap: false,
            type : 'category',
            axisLabel: {
                textStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // fontSize: 35,
                }
            },
            nameTextStyle: {
                // color: 'rgba(0,255,0,30)', 
                // fontSize: 35,
            },
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // show:false,
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        series: [
            {
                name: 'x方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(0,255,255,255)'
                },
                data: gyrX1
            },
            {
                name: 'y方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,0,255,255)'
                },
                data: gyrY1
            },
            {
                name: 'z方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,255,0,255)'
                },
                data: gyrZ1
            }
        ]
    };

    var option3 = {
        title: {
            text: '当前角度',
            x: 'center'
        },
        tooltip: {},
        // legend: {
            // borderWidth:1,
            // padding:10,
            // itemGap:20,
            // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
            // x:'left',
            // y:'top',
            // textStyle:{
            //     color:'rgba(0,0,0,255)'
            // }
        // },
        dataZoom:[
            {
                show:true,
                realtime:true,
                startValue:startValue3,
                endValue:endValue3,
            }
        ],
        xAxis: {
            data: xAxis3,
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // boundaryGap: false,
            type : 'category',
            axisLabel: {
                textStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // fontSize: 35,
                }
            },
            nameTextStyle: {
                // color: 'rgba(0,255,0,30)', 
                // fontSize: 35,
            },
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // show:false,
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        series: [
            {
                // name: 'kalman滤波后x方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(0,255,255,255)'
                },
                data: gyrX3
            },
            {
                // name: 'kalman滤波后y方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,0,255,255)'
                },
                data: gyrY3
            },
            {
                // name: 'kalman滤波后z方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,255,0,255)'
                },
                data: gyrZ3
            }
        ]
    };

    var option2 = {
        title: {
            text: 'kalman滤波后角速度（m/s2）',
            x: 'center'
        },
        tooltip: {},
        // legend: {
            // borderWidth:1,
            // padding:10,
            // itemGap:20,
            // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
            // x:'left',
            // y:'top',
            // textStyle:{
            //     color:'rgba(0,0,0,255)'
            // }
        // },
        dataZoom:[
            {
                show:true,
                realtime:true,
                startValue:startValue2,
                endValue:endValue2,
            }
        ],
        xAxis: {
            data: xAxis2,
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // boundaryGap: false,
            type : 'category',
            axisLabel: {
                textStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // fontSize: 35,
                }
            },
            nameTextStyle: {
                // color: 'rgba(0,255,0,30)', 
                // fontSize: 35,
            },
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // show:false,
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        series: [
            {
                // name: 'kalman滤波后x方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(0,255,255,255)'
                },
                data: gyrX2
            },
            {
                // name: 'kalman滤波后y方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,0,255,255)'
                },
                data: gyrY2
            },
            {
                // name: 'kalman滤波后z方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,255,0,255)'
                },
                data: gyrZ2
            }
        ]
    };

    var option4 = {
        title: {
            text: '低通滤波后的角度',
            x: 'center'
        },
        tooltip: {},
        // legend: {
            // borderWidth:1,
            // padding:10,
            // itemGap:20,
            // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
            // x:'left',
            // y:'top',
            // textStyle:{
            //     color:'rgba(0,0,0,255)'
            // }
        // },
        dataZoom:[
            {
                show:true,
                realtime:true,
                startValue:startValue4,
                endValue:endValue4,
            }
        ],
        xAxis: {
            data: xAxis4,
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // boundaryGap: false,
            type : 'category',
            axisLabel: {
                textStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // fontSize: 35,
                }
            },
            nameTextStyle: {
                // color: 'rgba(0,255,0,30)', 
                // fontSize: 35,
            },
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        yAxis: {
            type: 'value',
            splitLine:{
                show: true,
                color: 'rgba(0,255,0,30)',
            },
            // show:false,
            axisLine: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            },
            axisTick: {
                lineStyle: {
                    // color: 'rgba(0,255,0,30)',
                    // width: 5,
                }
            }
        },
        series: [
            {
                // name: 'kalman滤波后x方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(0,255,255,255)'
                },
                data: gyrX4
            },
            {
                // name: 'kalman滤波后y方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,0,255,255)'
                },
                data: gyrY4
            },
            {
                // name: 'kalman滤波后z方向角速度',
                type: 'line',
                itemStyle: {
                    color: 'rgba(255,255,0,255)'
                },
                data: gyrZ4
            }
        ]
    };

    chart1.setOption(option1);
    chart2.setOption(option2);
    chart3.setOption(option3);
    chart4.setOption(option4);

    var num1 = 0;
    var num2 = 0;
    var num3 = 0;
    var num4 = 0;

    var showCount1 = 0;
    var showCount2 = 0;
    var showCount3 = 0;
    var showCount4 = 0;

    // var socket = new WebSocket("ws://192.168.15.225:4444/");
    // var socket = new WebSocket("ws://10.215.102.140:4444/");
    var socket = new WebSocket("ws://192.168.13.178:4444/");

    socket.onmessage = function(event){
        var AllData = JSON.parse(event.data);
        // console.log(AllData);

        if(AllData.type == 0){
            gyrX1.push(AllData.x);
            gyrY1.push(AllData.y);
            gyrZ1.push(AllData.z);
            xAxis1.push(++num1);
            showCount1++;
            if(showCount1 == 100){
                startValue1 = gyrX1.length - showCount1;
                endValue1 = gyrX1.length;

                option1 = {
                    title: {
                        text: '角速度（m/s2）',
                        x: 'center'
                    },
                    tooltip: {},
                    legend: {
                        // borderWidth:1,
                        // padding:10,
                        // itemGap:20,
                        data:['x方向角速度','y方向角速度','z方向角速度'],
                        x:'left',
                        // y:'top',
                        // textStyle:{
                        //     color:'rgba(0,0,0,255)'
                        // }
                    },
                    dataZoom:[
                        {
                            show:true,
                            realtime:true,
                            startValue:startValue1,
                            endValue:endValue1,
                        }
                    ],
                    xAxis: {
                        data: xAxis1,
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // boundaryGap: false,
                        type : 'category',
                        axisLabel: {
                            textStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // fontSize: 35,
                            }
                        },
                        nameTextStyle: {
                            // color: 'rgba(0,255,0,30)', 
                            // fontSize: 35,
                        },
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // show:false,
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    series: [
                        {
                            name: 'x方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(0,255,255,255)'
                            },
                            data: gyrX1
                        },
                        {
                            name: 'y方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,0,255,255)'
                            },
                            data: gyrY1
                        },
                        {
                            name: 'z方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,255,0,255)'
                            },
                            data: gyrZ1
                        }
                    ]
                };

                chart1.setOption(option1);
                showCount1 = 0;
            }
        } else if(AllData.type == 1){
            gyrX2.push(AllData.x);
            gyrY2.push(AllData.y);
            gyrZ2.push(AllData.z);
            xAxis2.push(++num2);
            showCount2++;
            if(showCount2 == 100){
                startValue2 = gyrX2.length - showCount2;
                endValue2 = gyrX2.length;

                option2 = {
                    title: {
                        text: 'kalman滤波后角速度（m/s2）',
                        x: 'center'
                    },
                    tooltip: {},
                    // legend: {
                        // borderWidth:1,
                        // padding:10,
                        // itemGap:20,
                        // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
                        // x:'left',
                        // y:'top',
                        // textStyle:{
                        //     color:'rgba(0,0,0,255)'
                        // }
                    // },
                    dataZoom:[
                        {
                            show:true,
                            realtime:true,
                            startValue:startValue2,
                            endValue:endValue2,
                        }
                    ],
                    xAxis: {
                        data: xAxis2,
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // boundaryGap: false,
                        type : 'category',
                        axisLabel: {
                            textStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // fontSize: 35,
                            }
                        },
                        nameTextStyle: {
                            // color: 'rgba(0,255,0,30)', 
                            // fontSize: 35,
                        },
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // show:false,
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    series: [
                        {
                            name: 'kalman滤波后x方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(0,255,255,255)'
                            },
                            data: gyrX2
                        },
                        {
                            name: 'kalman滤波后y方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,0,255,255)'
                            },
                            data: gyrY2
                        },
                        {
                            name: 'kalman滤波后z方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,255,0,255)'
                            },
                            data: gyrZ2
                        }
                    ]
                };

                chart2.setOption(option2);
                showCount2 = 0;
            }
        } else if(AllData.type == 2){
            gyrX3.push(AllData.x);
            gyrY3.push(AllData.y);
            gyrZ3.push(AllData.z);
            xAxis3.push(++num3);
            showCount3++;
            if(showCount3 == 100){
                startValue3 = gyrX3.length - showCount3;
                endValue3 = gyrX3.length;

                option3 = {
                    title: {
                        text: '当前角度',
                        x: 'center'
                    },
                    tooltip: {},
                    // legend: {
                        // borderWidth:1,
                        // padding:10,
                        // itemGap:20,
                        // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
                        // x:'left',
                        // y:'top',
                        // textStyle:{
                        //     color:'rgba(0,0,0,255)'
                        // }
                    // },
                    dataZoom:[
                        {
                            show:true,
                            realtime:true,
                            startValue:startValue3,
                            endValue:endValue3,
                        }
                    ],
                    xAxis: {
                        data: xAxis3,
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // boundaryGap: false,
                        type : 'category',
                        axisLabel: {
                            textStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // fontSize: 35,
                            }
                        },
                        nameTextStyle: {
                            // color: 'rgba(0,255,0,30)', 
                            // fontSize: 35,
                        },
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // show:false,
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    series: [
                        {
                            name: 'kalman滤波后x方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(0,255,255,255)'
                            },
                            data: gyrX3
                        },
                        {
                            name: 'kalman滤波后y方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,0,255,255)'
                            },
                            data: gyrY3
                        },
                        {
                            name: 'kalman滤波后z方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,255,0,255)'
                            },
                            data: gyrZ3
                        }
                    ]
                };

                chart3.setOption(option3);
                showCount3 = 0;
            }
        } else if(AllData.type == 3){
            gyrX4.push(AllData.x);
            gyrY4.push(AllData.y);
            gyrZ4.push(AllData.z);
            xAxis4.push(++num4);
            showCount4++;
            if(showCount4 == 100){
                startValue4 = gyrX4.length - showCount4;
                endValue4 = gyrX4.length;

                option4 = {
                    title: {
                        text: '低通滤波后的角度',
                        x: 'center'
                    },
                    tooltip: {},
                    // legend: {
                        // borderWidth:1,
                        // padding:10,
                        // itemGap:20,
                        // data:['kalman滤波后x方向角速度','kalman滤波后y方向角速度','kalman滤波后z方向角速度'],
                        // x:'left',
                        // y:'top',
                        // textStyle:{
                        //     color:'rgba(0,0,0,255)'
                        // }
                    // },
                    dataZoom:[
                        {
                            show:true,
                            realtime:true,
                            startValue:startValue4,
                            endValue:endValue4,
                        }
                    ],
                    xAxis: {
                        data: xAxis4,
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // boundaryGap: false,
                        type : 'category',
                        axisLabel: {
                            textStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // fontSize: 35,
                            }
                        },
                        nameTextStyle: {
                            // color: 'rgba(0,255,0,30)', 
                            // fontSize: 35,
                        },
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        splitLine:{
                            show: true,
                            color: 'rgba(0,255,0,30)',
                        },
                        // show:false,
                        axisLine: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        },
                        axisTick: {
                            lineStyle: {
                                // color: 'rgba(0,255,0,30)',
                                // width: 5,
                            }
                        }
                    },
                    series: [
                        {
                            name: 'kalman滤波后x方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(0,255,255,255)'
                            },
                            data: gyrX4
                        },
                        {
                            name: 'kalman滤波后y方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,0,255,255)'
                            },
                            data: gyrY4
                        },
                        {
                            name: 'kalman滤波后z方向角速度',
                            type: 'line',
                            itemStyle: {
                                color: 'rgba(255,255,0,255)'
                            },
                            data: gyrZ4
                        }
                    ]
                };

                chart4.setOption(option4);
                showCount4 = 0;
            }
        }
    };

    socket.onclose = function(event){
        console.log("model socket close");
	};

	socket.onerror = function(event) { 

    };

    socket.onopen = function(event){
		console.log("socket open");
	};
}